.todo-btn {
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--mainColor);
  color: white;
  transition: all 0.2s;
  padding: 0 var(--basePadding);
  line-height: 1.575;
  min-width: fit-content;
  box-shadow: 0px 2px 1px -1px #4373f9b2, 0px 1px 2px 0px #4373f956, 0px 2px 4px 1px #4373f930;
  &:hover {
    background: var(--mainActiveColor);
    
    box-shadow: 0 1px 2px -1px #4373f9d7, 0 1px 2px 0 #4373f9b2, 0 2px 4px 2px #4373f956;
  }
  &:focus-visible {
    outline: none;
  }
  &--danger {
    border: 1px solid var(--red);
    background-color: white;
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    box-shadow: none;
    &:hover {
      background-color: rgb(255, 231, 231);
      box-shadow: none;
    }
    
    svg {
      height: 15px;
      width: 15px;
    }
  }
  &--plain {
    border: 1px solid #f2f2f2;
    background-color: white;
    color: rgb(72, 72, 72);
    box-shadow: none;
    &:hover {
      background-color: #f2f2f2;
      box-shadow: none;
    }
  }
}
